import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import LanguageSwitcher from './LanguageSwitcher';
import ThemeSwitcher from './ThemeSwitcher';
import './Header.css';
import { message } from 'antd'
interface HeaderProps {
    onToggleSidebar: () => void;
}

const Header: React.FC<HeaderProps> = ({ onToggleSidebar }) => {
    const [showNotifications, setShowNotifications] = useState(false);
    const [showUserMenu, setShowUserMenu] = useState(false);
    const navigate = useNavigate();
    const { t } = useTranslation();

    const notifications = [
        { id: 1, title: t('notifications.newUser'), message: t('notifications.newUserMessage'), time: '2分钟前' },
        { id: 2, title: t('notifications.orderReminder'), message: t('notifications.orderMessage'), time: '5分钟前' },
        { id: 3, title: t('notifications.systemUpdate'), message: t('notifications.systemMessage'), time: '1小时前' }
    ];

    const handleLogout = () => {
        // 清除本地存储的token
        localStorage.removeItem('authToken');
        localStorage.removeItem('userRole');
        localStorage.removeItem('userEmail');
        message.success('退出登录成功！');
        // 跳转到登录页
        navigate('/login');
        // 关闭用户菜单
        setShowUserMenu(false);
    };

    const handleProfile = () => {
        console.log('查看个人资料');
        setShowUserMenu(false);
    };

    const handleSettings = () => {
        console.log('打开账户设置');
        setShowUserMenu(false);
    };

    console.log('Header component is rendering');

    return (
        <header className="admin-header">
            <div className="header-left">
                <button
                    className="sidebar-toggle"
                    onClick={onToggleSidebar}
                    aria-label="切换侧边栏"
                >
                    <span className="hamburger"></span>
                </button>

                <div className="breadcrumb">
                    <span className="breadcrumb-item">{t('common.home')}</span>
                    <span className="breadcrumb-separator">/</span>
                    <span className="breadcrumb-current">{t('common.dashboard')}</span>
                </div>
            </div>

            <div className="header-right">
                <div className="header-actions">
                    <div className="search-box">
                        <input
                            type="text"
                            placeholder={t('common.search')}
                            className="search-input"
                        />
                        <span className="search-icon">🔍</span>
                    </div>

                    <div className="notification-dropdown">
                        <button
                            className="notification-btn"
                            onClick={() => setShowNotifications(!showNotifications)}
                        >
                            <span className="notification-icon">🔔</span>
                            <span className="notification-badge">3</span>
                        </button>

                        {showNotifications && (
                            <div className="notification-menu">
                                <div className="notification-header">
                                    <h3>{t('common.notifications')}</h3>
                                    <button className="mark-all-read">{t('common.markAllRead')}</button>
                                </div>
                                <div className="notification-list">
                                    {notifications.map(notification => (
                                        <div key={notification.id} className="notification-item">
                                            <div className="notification-content">
                                                <div className="notification-title">{notification.title}</div>
                                                <div className="notification-message">{notification.message}</div>
                                                <div className="notification-time">{notification.time}</div>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        )}
                    </div>

                    {/* 语言切换按钮 */}
                    <div className="language-switcher">
                        <LanguageSwitcher />
                    </div>

                    {/* 主题切换按钮 */}
                    <div className="theme-switcher">
                        <ThemeSwitcher />
                    </div>

                    <div className="user-dropdown">
                        <button
                            className="user-btn"
                            onClick={() => setShowUserMenu(!showUserMenu)}
                        >
                            <div className="user-avatar">👤</div>
                            <span className="user-name">{(localStorage.getItem('userRole') === 'admin') ? '管理员' : '成员'}</span>
                            <span className="dropdown-arrow">▼</span>
                        </button>

                        {showUserMenu && (
                            <div className="user-menu">
                                <div className="user-menu-item" onClick={handleProfile}>
                                    <span className="menu-icon">👤</span>
                                    <span>{t('common.profile')}</span>
                                </div>
                                <div className="user-menu-item" onClick={handleSettings}>
                                    <span className="menu-icon">⚙️</span>
                                    <span>{t('common.accountSettings')}</span>
                                </div>
                                <div className="user-menu-divider"></div>
                                <div className="user-menu-item" onClick={handleLogout}>
                                    <span className="menu-icon">🚪</span>
                                    <span>{t('common.logout')}</span>
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </header>
    );
};

export default Header;

